아티팩트로 창작하기

예상 소요 시간: 20분

학습 목표

이 수업을 마치면 다음을 할 수 있습니다:

아티팩트가 무엇인지, Claude가 언제 생성하는지 설명하기
동료와 아티팩트를 공유하고 공개적으로 게시하기
일반적인 아티팩트 문제 해결하기

아티팩트란 무엇인가요?

아티팩트는 Claude가 대화와 함께 전용 창에 생성하는 독립적이고 인터랙티브한 출력물입니다. 채팅에 묻혀있는 긴 코드 블록이나 텍스트 대신, 작동하는 웹사이트, 인터랙티브 차트, 즉시 다운로드할 수 있는 문서 등 콘텐츠가 렌더링되어 바로 사용 가능한 형태로 표시됩니다.

Claude는 콘텐츠가 특정 기준을 충족하면 자동으로 아티팩트를 생성합니다:

일반적으로 15줄 이상의 상당한 분량이며 자기 완결적인 경우
편집, 반복 개선, 또는 재사용하고 싶을 가능성이 높은 경우
주변 대화 없이도 독립적으로 존재할 수 있는 복잡한 콘텐츠인 경우
나중에 참조하거나 사용하고 싶은 콘텐츠인 경우

일반적인 아티팩트 유형

Claude는 다양한 필요에 맞는 여러 종류의 아티팩트를 생성할 수 있습니다:

문서 (마크다운, 일반 텍스트 등): 회의록, 보고서, 프로젝트 계획, 블로그 게시물 등 내보내거나 계속 편집하고 싶은 텍스트 중심 콘텐츠에 적합합니다.
코드 스니펫: Python, JavaScript, C++ 등 모든 프로그래밍 언어로 작성된 실제 작동하는 코드입니다. 코드를 보거나 복사하거나 다운로드하여 자신의 프로젝트에 사용할 수 있습니다.
HTML 페이지: HTML, CSS, JavaScript를 포함한 완전한 웹 페이지를 단일 파일로 제공합니다. 랜딩 페이지, 양식, 인터랙티브 데모, 빠른 프로토타입에 적합합니다.
SVG 이미지: 로고, 아이콘, 일러스트레이션 및 기타 시각적 요소를 위한 확장 가능한 벡터 그래픽입니다. 아티팩트 창에서 직접 렌더링되므로 결과물을 정확히 확인할 수 있습니다.
Mermaid 다이어그램: 순서도, 시퀀스 다이어그램, 간트 차트, 조직도 등을 생성합니다. 시각화하고 싶은 관계를 설명하면 Claude가 수정 가능한 다이어그램을 만들어 드립니다.
React 컴포넌트: 계산기, 대시보드, 게임, 데이터 시각화 등 실제 기능을 갖춘 인터랙티브 UI 요소입니다. 단순한 목업이 아니라 실제 로직을 포함하며 사용자 입력에 반응합니다.

첫 번째 아티팩트 만들기

아티팩트를 만드는 것은 대화를 나누는 것만큼 간단합니다. 원하는 것을 설명하기만 하면 Claude가 아티팩트로 제시할지 여부를 결정합니다.

예를 들어 다음과 같이 말할 수 있습니다:

"고객 온보딩 프로세스를 보여주는 순서도를 만들어 줘"
"월별 지출을 입력하고 내역을 볼 수 있는 인터랙티브 대시보드를 만들어 줘"
"히어로 섹션과 기능 목록이 있는 생산성 앱 랜딩 페이지를 디자인해 줘"
"새로운 이니셔티브에 재사용할 수 있는 프로젝트 브리프 템플릿을 작성해 줘"

기대했는데 Claude가 자동으로 아티팩트를 생성하지 않으면 명시적으로 요청할 수 있습니다: "이것을 아티팩트로 만들어 줘" 또는 "아티팩트로 보여줘."

Claude가 아티팩트를 생성하면 대화 오른쪽의 전용 창에 표시됩니다. 여기서 다음 작업을 할 수 있습니다:

다양한 형식 보기: 미리보기(어떻게 보이는지)와 기본 코드 사이를 전환하기
콘텐츠 복사: 복사 아이콘을 클릭하여 다른 곳에서 사용할 콘텐츠 가져오기
파일 다운로드: 아티팩트를 파일로 컴퓨터에 저장하기
코드 보기: Claude가 내부적으로 생성한 내용 정확히 확인하기

아티팩트 공유 및 게시

유용한 것을 만들었다면 공유 방법이 여러 가지 있습니다.

복사 또는 다운로드: 개인 사용이나 다른 채널을 통한 공유를 위해 아티팩트 창의 오른쪽 하단 모서리에 있는 복사 또는 다운로드 버튼을 사용하세요.

조직 내 공유 (Claude for Work): 팀 및 엔터프라이즈 사용자는 동료들과 내부적으로 아티팩트를 공유할 수 있습니다. 공유된 아티팩트는 조직 내에 유지되며 접근하려면 팀 인증이 필요합니다.

공개 게시: 무료, Pro, Max 사용자는 링크가 있는 누구나 접근할 수 있도록 아티팩트를 게시할 수 있습니다. 게시하면:

선택한 버전만 공개됩니다 (채팅은 비공개로 유지됩니다)
누구나 Claude 계정 없이 아티팩트를 보고 상호작용할 수 있습니다
다른 사람들이 아티팩트를 "리믹스"할 수 있습니다—자신의 Claude 대화에서 열어 수정하고 발전시킬 수 있습니다

게시하려면 아티팩트 오른쪽 상단 모서리의 "공유" 또는 "게시" 버튼을 클릭하세요. 해당 아티팩트로 돌아가 공개 접근을 제거하면 언제든지 게시를 취소할 수 있습니다.

아티팩트를 최대한 활용하기 위한 팁

원하는 것을 구체적으로 설명하세요. "예산 추적기를 만들어 줘"도 좋지만, "카테고리별로 지출을 입력하고, 파이 차트 내역을 보고, 예산을 초과하면 경고를 받을 수 있는 월별 예산 추적기를 만들어 줘"가 더 좋습니다.

최종 사용자를 설명하세요. Claude에게 아티팩트를 사용할 사람을 알려주면 적절한 디자인 선택을 하는 데 도움이 됩니다. "이 순서도는 신입 직원을 위한 것입니다"는 "이 순서도는 엔지니어링 팀을 위한 것입니다"와 다른 결과를 만들어냅니다.

단계적으로 반복하세요. 한 번에 하나의 기능을 추가하거나 하나의 변경을 하세요. 이렇게 하면 무엇이 작동하는지 파악하고 문제를 조기에 발견하기가 더 쉬워집니다.

필요할 때 아티팩트를 요청하세요. 상당한 양의 작업을 요청했는데 Claude가 아티팩트를 생성하는 대신 채팅으로 응답하면 "아티팩트로 만들어 주세요"라고 말하면 됩니다.

수업 성찰

계속 진행하기 전에 다음을 생각해 보세요:

재사용 가능한 인터랙티브 아티팩트를 활용하면 도움이 될 반복적인 업무는 무엇인가요?
업무에서 순서도나 다이어그램으로 표현하면 더 명확해질 프로세스가 있나요?
아이디어를 빠르게 테스트하는 데 도움이 될 프로토타입이나 도구는 무엇인가요?

다음 단계

다음 수업에서는 Claude를 기존 도구 및 데이터 소스에 연결하여 단순한 대화를 넘어 실제 워크플로우로 Claude의 기능을 확장하는 방법을 배웁니다.

피드백

강좌를 진행하면서 업무에서 강좌의 개념을 어떻게 활용하고 있는지, 그리고 어떤 피드백이든 들려주시면 감사하겠습니다. 피드백을 여기에서 공유해 주세요.

헤더 탐색